<template>
  <div class="addInvoiceDialogPage">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="50%"
      :before-close="handleClose"
      custom-class="custom-dialog"
    >
      <div class="content">
        <el-form
          :inline="true"
          label-width="120px"
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="form-inline"
        >
          <el-form-item label="发票抬头" prop="invoiceHeader">
            <el-input
              v-model="ruleForm.invoiceHeader"
              placeholder="请输入发票抬头"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="invoiceAddress">
            <el-input
              v-model="ruleForm.invoiceAddress"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="dutyParagraph">
            <el-input
              v-model="ruleForm.dutyParagraph"
              placeholder="请输入税号"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="invoicePhone">
            <el-input
              v-model="ruleForm.invoicePhone"
              placeholder="请输入电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="openingBank">
            <el-input
              v-model="ruleForm.openingBank"
              placeholder="请输入开户银行"
            ></el-input>
          </el-form-item>
          <el-form-item label="银行账户" prop="bankAccount">
            <el-input
              v-model="ruleForm.bankAccount"
              placeholder="请输入银行账户"
            ></el-input>
          </el-form-item>
          <el-form-item label="开票金额" prop="amount">
            <el-input
              v-model="ruleForm.amount"
              placeholder="本次到账金额(元)"
              @input="
                ruleForm.amount = limitInputNum(ruleForm.amount, 7, 3, true)
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="金额类型" prop="paymentMethod">
            <el-select v-model="ruleForm.paymentMethod">
              <el-option label="押金" :value="1"></el-option>
              <el-option label="租金" :value="2"></el-option>
              <el-option label="押金+租金" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="本次费用时长" prop="timeArr">
            <el-date-picker
              v-model="ruleForm.timeArr"
              @change="change"
              type="daterange"
              value-format="YYYY-MM-DD"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item label="开票类型" prop="type">
            <el-select v-model="ruleForm.type">
              <el-option
                v-for="(item, index) in invoiceType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="财务人员" prop="financialUserId">
            <el-select v-model="ruleForm.financialUserId">
              <el-option
                v-for="(item, index) in userList"
                :key="index"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="ruleForm.remarks"
              placeholder="非必填"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer d-flex j-center">
          <el-button
            class="button_cancel2"
            @click="dialogVisible = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            class="button_view"
            @click="onConfirm"
          >
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElDatePicker,
  ElSelect,
  ElOption
} from 'element-plus'
import { invoiceApi, leaseApi } from '@/api/lease'
import { invoiceType } from '@/common/dict/dictCollect'
import { limitInputNum } from '@/common/utils/GlobalUtils'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  form: {
    type: Object,
    default: {}
  },
  title: {
    type: String,
    default: '新增发票'
  }
})

const ruleForm = reactive({
  invoicingInformationId: '',
  invoiceHeader: '',
  invoiceAddress: '',
  dutyParagraph: '',
  invoicePhone: '',
  openingBank: '',
  bankAccount: '',
  businessId: '',
  amount: '',
  startTime: '',
  endTime: '',
  remarks: '',
  type: '',
  financialUserId: '',
  timeArr: []
})
const rules = reactive({
  invoiceHeader: [
    { required: true, message: '请输入发票抬头', trigger: 'blur' }
  ],
  invoiceAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '请输入金额类型', trigger: 'blur' }],
  dutyParagraph: [{ required: true, message: '请输入税号', trigger: 'blur' }],
  invoicePhone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
  openingBank: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
  bankAccount: [{ required: true, message: '请输入银行账户', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入开票金额', trigger: 'blur' }],
  timeArr: [{ required: true, message: '请选择费用时长', trigger: 'change' }],
  type: [{ required: true, message: '请选择开票类型', trigger: 'change' }],
  financialUserId: [
    { required: true, message: '请选择财务人员', trigger: 'change' }
  ]
})

let emits = defineEmits(['update:visible', 'onConfirm'])
const dialogVisible = ref(props.visible)

const handleClose = () => {
  // 需要修改父组件的数据
  emits('update:visible', false)
}

const userList = ref([])
const getUserList = () => {
  leaseApi.getUserList().then((res) => {
    userList.value = res.data
  })
}

// 监听visible的变化 只能监听第一次的变化
watch(
  () => props.visible,
  (value) => {
    dialogVisible.value = value
  }
)

// 监听组件内部的dialogVisible变化
watch(
  () => dialogVisible.value,
  (value) => {
    emits('update:visible', value)
  }
)

watch(
  () => props.form,
  (value) => {
    if (JSON.stringify(value) !== '{}') {
      for (let key in value) {
        for (let k in ruleForm) {
          if (key === k) {
            ruleForm[k] = value[key]
          } else {
            ruleForm[key] = value[key]
          }
        }
      }
    }
  }
)

const change = (e) => {
  if (e) {
    ruleForm.startTime = e[0]
    ruleForm.endTime = e[1]
    return
  }
  ruleForm.startTime = ''
  ruleForm.endTime = ''
}

const ruleFormRef = ref(null)
// 确认
const onConfirm = () => {
  ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      let type = 'add'
      if (props.title === '新增发票') {
        type = 'add'
      }
      if (props.title === '修改发票') {
        type = 'update'
      }
      invoiceApi[type](ruleForm).then((res) => {
        if (res.code == 200) {
          ElMessage.success('操作成功!')
          dialogVisible.value = false
          emits('onConfirm')
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

onMounted(() => {
  getUserList()
})
</script>

<style>
.custom-dialog .el-dialog__header {
  display: flex;
  justify-content: center;
}
</style>

<style lang="scss" scoped>
.addInvoiceDialogPage {
}
</style>
